<template>
    <h4>路由模式切换</h4>
    <pre class="note">
    VueRouter需要通过配置 history 取值，修改路由模式
        1. hash模式(createWebHashHistory) ： 以 html 中 锚点技术实现的 路由匹配切换
            - 锚点 可以更改 url地址的同时 ，不刷新页面的方式实现
            - 通过 window.location.hash 获取 锚点值，通过锚点值 匹配组件，进行渲染展示
            <code v-note>
                import { createRouter,createWebHashHistory } from "vue-router"
                import routes from "./routes.js";

                const router = createRouter({
                    // 定义路由模式
                    // process.env.BASE_URL 加载获取 vue.config.js 配置中的 publicPath 项目地址
                    history:createWebHashHistory( process.env.BASE_URL ),
                    routes
                })

                // 输出路由对象=>路由对象带有install函数，是vue应用的一个插件对象
                export default router;
            </code>
        2. history 模式(createWebHistory) ： 历史地址模式 
            - 必须配合 base 参数进行定义前缀描述和加载
            - 该模式不能单独使用，必须需要后台通过代码进行 配合使用
            - 将地址转换为正常的 URL地址，使用JS history.pushState API 实现页面不刷新组件更新的效果
            <code v-note>
                import { createRouter,createWebHistory } from "vue-router"
                import routes from "./routes.js";

                const router = createRouter({
                    // 定义路由模式
                    // process.env.BASE_URL 加载获取 vue.config.js 配置中的 publicPath 项目地址
                    history:createWebHistory( process.env.BASE_URL ),
                    routes
                })

                // 输出路由对象=>路由对象带有install函数，是vue应用的一个插件对象
                export default router;
            </code>
            - koa 服务器配置
                => 安装服务器回退插件 npm install --save koa2-connect-history-api-fallback
                => koa 启动文件增加如下配置
                <code v-note>
                    const Koa = require("koa");
                    const path = require("path");
                    const serve = require("koa-static");
                    // 加载回退中间件
                    const { historyApiFallback } = require('koa2-connect-history-api-fallback');

                    const app = new Koa();

                    // vue-router历史模式兼容服务插件必须定义在所有服务器静态资源之前
                    //      服务器的请求资源不是只有vue项目一个，还包含其它静态资源和数据接口等
                    //      历史模式的兼容插件必须准确设置 vue 项目的入口html文件，和被操作的项目目录
                    //      并通过白名单方式完成其它非vue项目的路径放行
                    app.use( historyApiFallback({
                        // index 用于配置 vue 项目的入口html文件
                        // index的路径是以服务器路径为参考的 => http://127.0.0.1:3000/vue项目文件夹/index.html
                        index:"/vue项目文件夹/index.html",
                        // 访问路径判断重写，定义放行白名单
                        rewrites:[
                            {
                                // 路径判断依据
                                // 通过正则拦截符合条件的请求，经过to配置进行地址转换
                                from:new RegExp("^(?!(/vue项目文件夹/)).*"), 
                                // 重写返回路径
                                to:function(content){
                                    // 将访问路径直接向下进行服务器执行
                                    return content.parsedUrl.path
                                }
                            }
                        ]
                    }) );

                    // 回退中间件必须在静态资源之前
                    let staticPath = path.join(__dirname, "./public/");
                    app.use(serve(staticPath));
                </code>
    </pre>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>